<template>
  <view class="search-res">

    <!-- 搜索栏-->
    <view class="header-nav">
      <view class="back" @click="comeBack">
        <uni-icons type="back" size="15" color="#0c34ba"></uni-icons>
        <view class="nav-title">
          返回
        </view>
      </view>
      <view class="search-ipt">
        <uni-icons class="icon-search" type="search" color="#0c34ba" size="15"></uni-icons>
        <input auto-focus ref="keyword" type="text" placeholder="" v-model="keyword" @input="inputHandler">
      </view>
      <view class="cancel" @click="comeBack">
        取消
      </view>

    </view>

    <!-- 背景-->
    <view class="bg"></view>

    <!-- 卡片-->
    <view class="card" v-if="searchRes.length">
      <view @click="gotoDetailHandler(res['pid'])" class="goods_item" v-for="res in searchRes" :key="res['pid']">
        <view class="cover">
          <image :src="res['smallImg']">
          </image>
        </view>
        <view class="name">
          {{res['name']}}
        </view>
        <view class="enname">
          {{res['enname']}}
        </view>
        <view class="price">
          ￥{{res['price']}}
        </view>
      </view>

    </view>
    <MyEmpty v-else title="无匹配商品"></MyEmpty>
  </view>
</template>

<script>
  import {
    req
  } from "../utils/request/request.js"
  import MyEmpty from '../../components/MyEmpty/MyEmpty.vue'
  export default {
    components: {
      MyEmpty
    },
    data() {
      return {
        keyword: "",
        searchRes: []
      };
    },
    onLoad(opts) {
      this.keyword = opts.keyword
      this.searchHandler(opts.keyword)
    },
    onUnload() {
      this.keyword = ""
    },

    methods: {
      inputHandler() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.searchHandler(this.keyword)
        }, 500)
      },
      gotoDetailHandler(pid) {
        uni.navigateTo({
          url: '/pages/goods_detail/goods_detail?wd=' + pid
        })
      },
      searchHandler(name) {
        req('search', {
          reqData: {
            name
          }
        }).then(({
          data: res
        }) => {
          uni.showToast({
            title: res['msg']
          })
          this.searchRes = res.result
        }, err => {
          console.log(err)
        })
      },
      comeBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f7f7f7;
  }

  .search-res {
    .header-nav {
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      height: 100rpx;
      font-size: 26rpx;
      justify-content: space-between;

      .back {
        display: flex;
        align-items: center;
        color: #0c34ba;
      }

      .search-ipt {
        display: flex;
        align-items: center;
        position: relative;

        .icon-search {
          position: absolute;
          left: 8rpx;
        }

        input {
          background-color: #f7f8fa;
          padding: 10rpx 0;
          font-size: 24rpx;
          width: 350rpx;
          padding-left: 45rpx;
          border-top-left-radius: 50rpx;
          border-bottom-left-radius: 50rpx;
        }
      }
    }

    .bg {
      background-color: #0c34ba;
      height: 200rpx;
    }

    .card {
      display: flex;
      flex-wrap: wrap;
      border-top-right-radius: 15rpx;
      border-top-left-radius: 15rpx;
      overflow: hidden;
      background-color: #fff;
      transform: translateY(-50rpx);
      margin: 0 30rpx;
      padding: 25rpx;
      padding-bottom: 40rpx;

      .empty-tips {
        font-size: 24rpx;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods_item {
        width: 33.333333%;
        margin-bottom: 30rpx;
        box-sizing: border-box;

        .cover {
          width: 200rpx;
          height: 200rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .name,
        .enname,
        .price {
          font-size: 25rpx;
          margin-top: 10rpx;
          width: 200rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .enname {
          color: #9a9997;
        }

        .price {
          color: #0c34ba;
          font-weight: bold;
          font-size: 28rpx;
        }
      }
    }


  }
</style>
